<!-- 转盘 -->
<template>
  <div class="turn-main">
    <div class="box-wrap">
      <img
        class="gift"
        src="@/assets/images/2020_dati/abcchina/wodelipin.png"
        alt=""
      />
      <img
        class="close"
        @click="handleClose"
        src="@/assets/images/2020_dati/wjb_close.png"
        alt
      />
      <!-- 转盘 -->
      <div class="content">
        <!-- 盘 -->
        <img
          class="true"
          src="@/assets/images/2020_dati/abcchina/dibuzhuanpan1.png"
          :style="
            'transform:rotateZ(' + rotateDeg + 'deg);transition-duration:3s'
          "
          alt=""
        />
        <!-- 针 -->
        <img
          class="lotter"
          @click="begin"
          src="@/assets/images/2020_dati/abcchina/lotter1.png"
          alt=""
        />
      </div>

      <!-- 剩余机会 -->
      <div class="content1">
        <p class="lottertimes">您有{{ times }}次抽奖机会</p>
        <button class="fxhy">分享好友</button>
      </div>

      <!-- 中奖 弹窗 -->
      <div class="mask-turn" v-if="JSON.stringify(maskList).includes('true')">
        <!-- 实物 -->
        <div class="goods-wrap" v-if="maskList.goods">
          <div class="title-goods">恭喜您获得</div>
          <div class="detail-goods">
            <div class="left-detail">
              <img :src="remarkimg" alt="" />
            </div>
            <div class="right-detail">
              {{ remark }}
            </div>
          </div>
          <div class="input-goods">
            <div class="title">请输入收货信息</div>
            <div class="input-wrap">
              <van-field
                class="item-input"
                v-model="username"
                placeholder="请输入您的姓名"
              ></van-field>
              <van-field
                class="item-input"
                v-model="phone"
                placeholder="请输入您的手机号"
              ></van-field>
              <van-field
                v-if="dizhi"
                class="item-input"
                v-model="addr"
                placeholder="请输入收入地址"
              ></van-field>
              <van-field
                v-if="wangdian"
                class="item-input"
                v-model="site"
                is-link
                @focus="showSecChoice = true"
                placeholder="请选中领取网点"
              ></van-field>
              <van-action-sheet
                v-model="showSecChoice"
                :round="false"
                :actions="sexes"
                @select="onSelect"
              ></van-action-sheet>
            </div>
            <p class="hint" v-if="hint">
              提示：请填写正确的个人信息，所获礼品将在活动结束后统一发放元初券码至登记的手机号。
            </p>
            <p class="hint" v-if="dizhi">
              提示：请填写正确的个人信息及收货地址，所获礼品将在活动结束后统一发放。
            </p>
            <p class="hint" v-if="wangdian">
              提示：请在2020年12月20日前至选择的网点领取礼品，逾期失效，领取时出示“我的礼品”给柜台人员。
            </p>
          </div>
          <button class="footer-goods" @click="pay">
            使用邮储卡支付1元获得
          </button>
        </div>
        <!-- 积分 -->
        <div class="coin-wrap" v-if="maskList.coin">
          <div class="coin-img">
            <img src="@/assets/images/2020_dati/abcchina/zu.png" alt="" />
            <p class="coin-p">恭喜您获得</p>
            <p class="coin-p1">{{ integral }}</p>
            <div>
              <img
                class="coin-img1"
                src="@/assets/images/2020_dati/abcchina/zu1.png"
                alt=""
              />
              <p class="coin-p2">立即使用积分</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, ActionSheet } from 'vant';
export default {
  components: {
    'van-field': Field,
    'van-action-sheet': ActionSheet
  },
  data() {
    return {
      hint: false,
      integral: '', //中的积分名字
      remark: '', //中实物的名字
      remarkimg: '', //中实物图片
      times: 0, //抽奖次数
      rotateDeg: 0, //指针转动
      key: true, //key
      iid: '',
      // 中奖 弹框
      maskList: {
        goods: false,
        coin: false
      },
      username: '', //姓名
      phone: '', //手机号
      addr: '', //收货地址
      dizhi: false,
      wangdian: false, //下拉网点
      site: '', //网点
      //下拉选择网点
      sexes: [
        { name: '思明营业部' },
        { name: '育秀支行' },
        { name: '鹭江' },
        { name: '富山支行' },
        { name: '金榜支行' },
        { name: '瑞景支行' },
        { name: '观音山支行' },
        { name: '湖里营业部' },
        { name: '高殿支行' },
        { name: '湖边支行' },
        { name: '象屿支行' },
        { name: '机场支行' },
        { name: '禾山支行' },
        { name: '万达支行' },
        { name: '集美营业部' },
        { name: '杏林支行' },
        { name: '杏北支行' },
        { name: '灌口支行' },
        { name: '海沧营业部' },
        { name: '自贸试验区嵩屿支行' },
        { name: '海虹支行' },
        { name: '霞阳支行' },
        { name: '同安营业部' },
        { name: '南门支行' },
        { name: '株厝支行' },
        { name: '西柯支行' },
        { name: '翔安营业部' },
        { name: '新圩支行' },
        { name: '开发新区支行' }
      ],
      showSecChoice: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    pay() {
      this.$http
        .post('/questionnaire/address', {
          id: this.iid,
          address: {
            username: this.username,
            phone: this.phone,
            address: this.addr
          }
        })
        .then(res => {});
    },
    onSelect(item) {
      (this.showSecChoice = false), (this.site = item.name);
    },
    // 隐藏
    handleClose() {
      this.$parent.maskList.turn = false;
    },
    // 抽奖
    begin() {
      // this.turntableDeg(240); //转动
      // console.log(this.times);
      // 如果没次数
      if (this.times == 0) return;
      // 防止重复点击
      if (this.key) {
        // 转动时候不可点击
        this.key = false;
        // 抽奖
        this.Api_lottery();
      }
    },
    // 抽奖
    Api_lottery() {
      this.$http
        .post('/questionnaire/lottery', {
          source: 'abchina_turntable_2020'
        })
        .then(res => {
          this.iid = res.data.object.id;
          console.log('抽奖', res);
          if (res.data.code == '0') {
            //中什么奖
            // const award = res.data.object.award;
            this.lotteryFilter(res);
          } else if (res.data.code == '1') {
            if (res.data.message == 'notimes') {
              this.key = true; //转盘可以点击
              // Toast('今日抽奖次数已用完');
              this.$dialog.alert({
                title: '提示',
                message: '今日的抽奖次数用完了'
              });
            } else if (res.data.message == 'toshare') {
              this.key = true; //转盘可以点击
              this.showShare = true; //显示分享
              this.$dialog.alert({ title: '提示', message: '去分享再玩一次' });
            } else {
              this.key = true;
              this.$dialog.alert({ title: '提示', message: res.data.message });
            }
          }
        });
    },
    // 中奖结果
    lotteryFilter(res) {
      console.log('执行', res);
      switch (res.data.object.content) {
        case '盛洲2.5升食用油':
          this.turntableDeg(240);
          this.times--;
          this.remarkimg = require('@/assets/images/2020_dati/abcchina/you.png');
          this.remark = '盛洲2.5升食用油';
          this.wangdian = true;
          setTimeout(() => {
            this.key = true;
            this.maskList.goods = true;
            this.nopraze = true;
          }, 3000);
          break;
        case '500元元初电子代金券':
          this.turntableDeg(360);
          this.ids = res.data.object.id;
          this.times--;
          this.remarkimg = require('@/assets/images/2020_dati/abcchina/yuanchu.png');
          this.hint = true;
          this.remark = '500元元初电子代金券';
          setTimeout(() => {
            this.maskList.goods = true;
            this.key = true;
            this.paizi1 = true;
          }, 3000);
          break;
        case '10积分':
          this.turntableDeg(120);
          this.ids = res.data.object.id;
          this.times--;
          this.integral = '10积分';
          setTimeout(() => {
            this.maskList.coin = true;
            this.key = true;
            this.paizi = true;
          }, 3000);
          break;
        case '30积分':
          this.turntableDeg(300);
          this.id = res.data.object.id;
          this.times--;
          this.integral = '30积分';
          setTimeout(() => {
            this.key = true;
            this.maskList.coin = true;

            this.paizi2 = true;
          }, 3000);
          break;
        case '农特康泉天然有机大米5kg':
          this.turntableDeg(60);
          this.id = res.data.object.id;
          this.times--;
          this.dizhi = true;
          this.remarkimg = require('@/assets/images/2020_dati/abcchina/dami.png');
          this.remark = '农特康泉天然有机大米5kg';
          setTimeout(() => {
            this.key = true;
            this.maskList.goods = true;
            this.paizi2 = true;
          }, 3000);
          break;
        case '1积分':
          this.turntableDeg(180);
          this.id = res.data.object.id;
          this.times--;
          this.integral = '1积分';
          setTimeout(() => {
            this.key = true;
            this.maskList.coin = true;
            this.paizi2 = true;
          }, 3000);
          break;
      }
    },
    // 旋转转盘
    turntableDeg(num) {
      this.rotateDeg =
        this.rotateDeg + 3600 + (360 - (this.rotateDeg % 360)) + num;
    },
    // 获取用户抽奖次数
    Api_getUserTimes() {
      this.$http
        .post('/questionnaire/time', {
          source: 'abchina_turntable_2020'
        })
        .then(res => {
          if (res.data.code == '0') {
            this.times = res.data.object;
            // console.log('当前可转次数: ', this.times);
          } else if (res.data.code == '1') {
            if (res.data.message == 'tosign') {
              this.$dialog
                .alert({
                  title: '提示',
                  message: '您还未报名',
                  confirmButtonText: '去报名'
                })
                .then(() => {
                  window.location.href =
                    'https://app.xm.abchina.com/zlpg/cardnew/';
                });
            }
          }
        });
    }
  },
  created() {},
  mounted() {
    // 获取用户抽奖次数
    this.Api_getUserTimes();
  }
};
</script>
<style lang="scss" scoped>
.turn-main {
  width: 100%;
  height: calc(617px * 2);
  // background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: fixed;
  // 转盘
  .box-wrap {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    position: relative;
    // 关闭按钮
    .close {
      position: absolute;
      right: calc(2 * 26px);
      top: calc(2 * 70px);
      z-index: 9999;
    }
    // 我的礼品
    .gift {
      position: absolute;
      right: calc(2 * 13px);
      top: calc(2 * 400px);
      width: 18%;
    }
    // 分享按钮 +  机会
    .content1 {
      .lottertimes {
        text-align: center;
        font-size: 30px;
      }
      .fxhy {
        height: 75px;
        width: 290px;
        margin-top: 40px;
        margin-left: 31%;
        color: white;
        font-size: 30px;
        background-color: #ff7170;
        border: none;
        border-radius: 40px;
      }
    }

    // 转盘
    .content {
      margin-top: 20%;
      position: relative;
      height: calc(375px * 2);
      .true {
        position: absolute;
      }
      .lotter {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 35%;
        height: 35%;
      }
    }
  }

  // 中奖  弹窗
  .mask-turn {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    // background-color: rgba(0, 0, 0, 0.7);
    background: #545454;
    display: flex;
    justify-content: center;
    align-items: center;
    // 实物
    .goods-wrap {
      width: 90%;
      background-color: #fff;
      padding: 30px;
      .title-goods {
        color: #000;
        font-weight: 600;
        font-size: 38px;
        // height: 80px;
        // border-bottom: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 2px;
        margin-bottom: 20px;
      }

      .detail-goods {
        border: 1px solid #ccc;
        border-radius: 10px;
        display: flex;
        // height: ;
        // 图片
        .left-detail {
          width: 230px;
          //   img {
          //   }
        }
        // 文字
        .right-detail {
          color: #000;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        }
      }

      .input-goods {
        // .title {
        // }

        // .input-wrap {
        //   .item-input {

        //   }
        // }
        .hint {
          margin-top: 20px;
          color: red;
        }
      }

      .footer-goods {
        margin-top: 60px;
        background-color: #ff5f2d;
        width: 75%;
        font-size: 37px;
        border-radius: 50px;
        height: 100px;
        border: none;
        margin-left: 12.5%;
      }
    }
    // 积分
    .coin-wrap {
      //   background-color: #fff;
      .coin-img {
        width: 500px;
        height: 700px;
        .coin-p {
          position: absolute;
          left: 42%;
          color: red;
          top: 35%;
          font-size: 30px;
          font-weight: 600;
        }
        .coin-p1 {
          position: absolute;
          left: 43%;
          color: red;
          top: 40%;
          font-size: 45px;
          font-weight: 600;
        }
        .coin-img1 {
          position: absolute;
          height: 100px;
          bottom: 20%;
          left: 26%;
        }
        .coin-p2 {
          position: absolute;
          left: 39%;
          color: red;
          bottom: 22%;
          font-size: 35px;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
